{% extends 'base.html' %}
{% block title %}工资条管理系统 - 首页{% endblock %}
{% load static %}
{% block content %}
    <script>
        function btn_cancel() {
            location.href = "{% url 'index' %}";
        }
    </script>
    <script type="text/javascript">
    $(document).ready(function () {
        bsCustomFileInput.init();
        });
</script>
    <script>
        $(function () {
            //隐藏div
            $("#bufa").hide();
            //添加事件
            $("#operate").change(function () {
                if($(this).val() == 1){
                    $("#bufa").hide();
                    $("#curent").show();
                }else {
                    $("#curent").hide();
                    $("#bufa").show();
                }
            })
        })
    </script>
    <!-- 顶部占位 -->
    <div style="height: 8px">
    </div>
<section class="content">
<div class="row">
          <div class="col-lg-3 col-6">
            <!-- 信息盒子 -->
            <div class="small-box bg-info">
              <div class="inner">
                <h3>{{ cur_month_send }}</h3>
                <p>本月发送的工资条</p>
              </div>
              <div class="icon">
                <i class="ion ion-bag"></i>
              </div>
              <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
              <div class="inner">
                <h3>{{ total_send }}<sup style="font-size: 20px"></sup></h3>
                <p>已发工资条总数</p>
              </div>
              <div class="icon">
                <i class="ion ion-stats-bars"></i>
              </div>
              <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-purple">
              <div class="inner">
                <h3>{{ totalUser }}</h3>
                <p>系统用户总数</p>
              </div>
              <div class="icon">
                <i class="ion ion-person-add"></i>
              </div>
              <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-danger">
              <div class="inner">
                <h3>{{ today_has_login_user }}</h3>

                <p>今日登录用户数</p>
              </div>
              <div class="icon">
                <i class="ion ion-pie-graph"></i>
              </div>
              <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
</div>
<div class="row">
    <div class="col-6">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">快捷发送</h3>
            </div>
        <form id="put" class="form" enctype="multipart/form-data" action="{% url 'payroll:upload_salary_file' %}" method="post">
            {% csrf_token %}
            <div class="card-body" style="height: 550px;">
                发放模式
                <div class="border border-success"></div>
                <div class="form-group row mt-3">
                    <label class="col-sm-2 col-form-label" style="color: red;text-align: right;">选择操作：</label>
                    <div class="col-sm-4">
                        <select id="operate" name="operate" class="form-control">
                            <option value="1" selected>正常发送</option>
                            <option value="0">补发之前</option>
                        </select>
                    </div>
                    <label class="col-sm-2 col-form-label" style="color: red;text-align: right;">处理模式：</label>
                    <div class="col-sm-4">
                        <input type="text" value="先预览，后发送。" class="form-control" readonly>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label" style="color: red;text-align: right;" >发放渠道：</label>
                    <div class="input-group row col-sm-10 mt-1">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="customCheckbox1" value="ent_wechat" checked name="send_way">
                            <label for="customCheckbox1" class="custom-control-label">企业微信</label>
                        </div>
                        <div class="custom-control custom-checkbox ml-4">
                            <input class="custom-control-input" type="checkbox" id="customCheckbox2" disabled  value="dingtalk" name="send_way">
                            <label for="customCheckbox2" class="custom-control-label">钉钉</label>
                        </div>
                        <div class="custom-control custom-checkbox ml-4">
                            <input class="custom-control-input custom-control-input-danger" type="checkbox" id="customCheckbox4" checked  value="email" name="send_way">
                            <label for="customCheckbox4" class="custom-control-label">邮件</label>
                        </div>
                    </div>
                </div>
                发放年月【默认为当月发上月】
                <div class="border border-primary"></div>
                <div id="curent" class="form-group row mt-3">
                    <label class="col-sm-2 col-form-label" style="color: green;text-align: right;">年份：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="send_year" value="{{ cur_year }}">
                    </div>
                    <label class="col-sm-2 col-form-label" style="color: green;text-align: right;">月份：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="send_month" value="{{ cur_month|add:-1 }}">
                    </div>
                </div>
                <div id="bufa" class="form-group row" style="padding-top: 15px;">
                    <label class="col-sm-2 col-form-label" style="color: green;text-align: right;">补发年份：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="bufa_year" placeholder="输入年份，如：2020">
                    </div>
                    <label class="col-sm-2 col-form-label" style="color: green;text-align: right;">补发月份：</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="bufa_month" placeholder="输入月份，如：08">
                    </div>
                </div>
                工资表
                <div class="border border-primary"></div>
                <div class="form-group row">
                    <label for="fileinput" class="float-left" style="color: #007bff;padding-top: 15px" >选择工资表: （格式仅支持：xlsx）</label>
                        <div class="input-group">
                            <div class="custom-file float-right">
                                <input type="file" class="custom-file-input" id="fileinput"  name="salary_file" accept=".xlsx">
                                <label class="custom-file-label" for="fileinput"></label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-2 ml-2">
                        <input class="btn btn-primary form-control" type="submit" value="提交"/>
                    </div>
                </div>
        </form>
        </div>
    </div>
    <div class="col-6">
        <div class="card card-danger">
            <div class="card-header">
                <h3 class="card-title">最新10条发送数据</h3>
            </div>
            <div class="card-body" style="overflow-y: auto;height: 600px;">
                <table id="sent" class="table table-bordered table-striped">
                    <thead>
                    <tr style="text-align: center;vertical-align: middle">
                        <th style="width: 60px;" nowrap="nowrap">序号</th>
                        <th style="width: 100px;" nowrap="nowrap">姓名</th>
                        <th nowrap="nowrap" style="width: 120px;">发送时间</th>
                        <th nowrap="nowrap">发送状态</th>
                        <th style="width: 100px;" nowrap="nowrap">发送渠道</th>
                        <th style="width: 100px;" nowrap="nowrap">确认情况</th>
                        <th style="width: 100px;" nowrap="nowrap">发送日志</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for info in latest_10 %}
                        <tr style="text-align: center;vertical-align: middle">
                            <td style="vertical-align: middle;">{{ forloop.counter }}</td>
                            <td style="vertical-align: middle;">{{ info.username }}</td>
                            <td style="vertical-align: middle;">{{ info.time }}</td>
                            {% ifequal info.status 0 %}
                                <td  style="vertical-align: middle;"><label style="background-color: #00c054;color: white;border-radius: 8px">&nbsp;&nbsp;{{ info.get_status_display }}&nbsp;&nbsp;</label></td>
                            {% else %}
                                <td style="vertical-align: middle;" ><label style="background-color: red;color: white;border-radius: 8px">&nbsp;&nbsp;{{ info.get_status_display }}&nbsp;&nbsp;</label></td>
                            {% endifequal %}
                            <td style="vertical-align: middle;">
                                {% if "ent_wechat" in info.send_type %}
                                    <label style="background-color: #007bff;color: white;border-radius: 8px">&nbsp;&nbsp;企业微信&nbsp;&nbsp;</label>
                                {% endif %}
                                {% if "email" in info.send_type %}
                                    <label style="background-color: #007bff;color: white;border-radius: 8px">&nbsp;&nbsp;邮件&nbsp;&nbsp;</label>
                                {% endif %}
                                {% if "dingtalk" in info.send_type %}
                                    <label style="background-color: #007bff;color: white;border-radius: 8px">&nbsp;&nbsp;钉钉&nbsp;&nbsp;</label>
                                {% endif %}
                            </td>
                            {% ifequal info.confirm '1' %}
                                <td style="color: #00c054; vertical-align: middle;"><i class="fa fa-check" ></i> 已确认</td>
                                {% else %}
                                <td style="color: red;vertical-align: middle;"><i class="fa fa-times" ></i> 未确认</td>
                            {% endifequal %}
                            <td style="vertical-align: middle;">{{ info.log }}</td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
            </div>
        </div>
    </div>
</div>
</section>
{% block custom_js %}
   <!--Datables-->
   <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
   <script src="{% static 'plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
<script>
  $(function () {
    $("#latest_20").DataTable({
        "responsive": false,  //适配手机端表格滚动，需设置为false
        "autoWidth": true,  //固定宽度
        "paging": true,    //允许分页
        "searching": true,   //允许内容搜索
        "lengthChange": true,  //允许改变每页显示的行数
        "ordering": true,      //允许排序
        "info": true,        //显示信息
        "oLanguage":{  //语言转换
            "sProcessing": "处理中...",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sZeroRecords": "没有找到匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共_TOTAL_ 项",
            "sLengthMenu": "每页显示: _MENU_",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sSearch": "搜索:",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上一页",
                "sNext": "下一页",
                "sLast": "尾页",
                },
            "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列",
        }
      }
    });
  });
</script>
{% if info %}
    <script type="text/javascript">
        info = '{{ info|safe }}'
        layui.use('layer',function () {
            var layer = layui.layer;
            layer.msg(info, function () {
            });
        })
    </script>
{% endif %}
{% endblock %}
{% endblock %}
